<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>iScroll:上、下拉刷新，加载更多</title>
		<link rel="stylesheet" type="text/css" href="test.css" />
		<script src='iscroll-4.2.5fix.js'></script>
		<!--iscroll插件-->
		<script type="text/javascript">
			/**
			 * 实现下拉刷新方法(pullDownAction)和上拉加载更多(pullUpAction)方法
			 * 
			   下面的 pullUpAction() 函数被下拉或上拉后调用，在此函数的最后，必须调用myScroll.refresh();
			   以便在数据加载完成后，调用界面更新方法
			 */
			var myScroll,
				pullDownEl, pullDownOffset,
				pullUpEl, pullUpOffset,
				generatedCount = 0;

			//pullDownAction方法用于模拟上拉刷新成功后，向底端追加数据;
			function pullUpAction() {
				//此处示例为每500毫秒产生一个行数据，共产生5行
				setTimeout(function() { // <-- Simulate network congestion, remove setTimeout from production!
					var el, li, i;
					el = document.getElementById('thelist');

					for(i = 0; i < 5; i++) {
						li = document.createElement('li');
						li.innerText = '这是加载的第 ' + (++generatedCount) + '条数据';
						el.appendChild(li, el.childNodes[0]);
					}

					myScroll.refresh(); // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
				}, 500); // <-- Simulate network congestion, remove setTimeout from production!
			}

			//pullDownAction方法用于模拟下拉刷新成功后，向顶端追加数据;
			function pullDownAction() {
				//此处示例为每500毫秒产生一个行数据，共产生3行
				setTimeout(function() { // <-- Simulate network congestion, remove setTimeout from production!
					var el, li, i;
					el = document.getElementById('thelist');

					for(i = 0; i < 3; i++) {
						li = document.createElement('li');
						li.innerText = '这是加载的第 ' + (++generatedCount) + '条数据';
						el.insertBefore(li, el.childNodes[0]);
					}

					myScroll.refresh(); // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
				}, 500); // <-- Simulate network congestion, remove setTimeout from production!
			}

			/*初始化iScroll控件*/
			function loaded() {
				pullDownEl = document.getElementById('pullDown');
				pullDownOffset = pullDownEl.offsetHeight; //获取元素自身的高度
				pullUpEl = document.getElementById('pullUp');
				pullUpOffset = pullUpEl.offsetHeight;

				myScroll = new iScroll('wrapper', {
					useTransition: false, //表示是否使用CSS3中的过渡效果，从true改为false
					topOffset: pullDownOffset, //pullDown区间高度
					onRefresh: function() {
						if(pullDownEl.className.match('loading')) {
							pullDownEl.className = '';
							pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
						} else if(pullUpEl.className.match('loading')) {
							pullUpEl.className = '';
							pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
						}
					},
					//onScrollMove表示根据用户下拉或上拉刷新的高度值，显示不同的文字
					onScrollMove: function() {
						//上下滑动判定，this.y表示手指下拉的高度
						if(this.y > 5 && !pullDownEl.className.match('flip')) {
							pullDownEl.className = 'flip';
							pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
							this.minScrollY = 0;
						} else if(this.y < 5 && pullDownEl.className.match('flip')) {
							pullDownEl.className = '';
							pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
							this.minScrollY = -pullDownOffset;
						} else if(this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
							pullUpEl.className = 'flip';
							pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
							this.maxScrollY = this.maxScrollY;
						} else if(this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
							pullUpEl.className = '';
							pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
							this.maxScrollY = pullUpOffset;
						}

					},

					/*实现iScroll插件的onScrollEnd事件，
					 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加。
					 */
					//onScrollEnd:表示用户下拉刷新完,放开手指时所显示的不同的交互文字
					onScrollEnd: function() {
						if(pullDownEl.className.match('flip')) {
							pullDownEl.className = 'loading';
							pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
							pullDownAction();

						} else if(pullUpEl.className.match('flip')) {
							pullUpEl.className = 'loading';
							pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
							pullUpAction();

						}
					}
				});

				setTimeout(function() {
					document.getElementById('wrapper').style.left = '0';
				}, 800);
			}

			/*
			  touchmove:表示手指在屏幕上滑动连续触发的事件
			*/
			document.addEventListener('touchmove', function(e) {
				e.preventDefault();
			}, false);
			/*
			  load事件：仅在所有资源都完全加载后才被触发
			  DOMContentLoaded：DOM加载之后及资源加载之前被触发.
			*/
			document.addEventListener('DOMContentLoaded', loaded, false);
		</script>
	</head>

	<body>
		<div id="header">
			iScroll实例:上、下拉刷新翻页，基于HTML5
		</div>
		<div id="wrapper">
			<div id="scroller">
				<div id="pullDown">
					<span class="pullDownIcon"></span>
					<span class="pullDownLabel">下拉加载更多...</span>
				</div>
				<ul id="thelist">
					<li>Pretty row 1</li>
					<li>Pretty row 2</li>
					<li>Pretty row 3</li>
					<li>Pretty row 4</li>
					<li>Pretty row 5</li>
					<li>Pretty row 6</li>
					<li>Pretty row 7</li>
					<li>Pretty row 8</li>
					<li>Pretty row 9</li>
					<li>Pretty row 10</li>
					<li>Pretty row 11</li>
					<li>Pretty row 12</li>
					<li>Pretty row 13</li>
					<li>Pretty row 14</li>
					<li>Pretty row 15</li>
				</ul>
				<div id="pullUp">
					<span class="pullUpIcon"></span>
					<span class="pullUpLabel">上拉加载更多...</span>
				</div>

			</div>
		</div>
		<div id="footer">
			<table width="100%" height="100%" cellpadding="0" cellspacing="0">
				<tr>
					<td align="center">
						<!--valign调垂向位置，align调横向位置-->
						<div align="center">
							<font color='#078CF9'>
								<!--规定文本颜色-->
								这里是下方栏
							</font>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</body>

</html>
